<template>
  <BorderBox8 style="width: 100%; height: 100%">
    <div ref="chartRef" style="width: 100%; height: 100%"></div>
  </BorderBox8>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import * as echarts from "echarts";
import { BorderBox8 } from "@kjgl77/datav-vue3";
const chartRef = ref(null);
// 存储 ECharts 实例
let chartInstance = null;
const initChart = () => {
  if (chartRef.value) {
    // 初始化 echarts 实例
    chartInstance = echarts.init(chartRef.value);

    // 配置项
    const option = {
      title: {
        text: "月度报废统计",
        left: "center",
        top: "10%",
        textStyle: {
          color: "#67e0e3",
          fontWeight: "bolder",
          fontSize: "24px",
        },
      },
      legend: {
        data: [
          "涂布平均报废率",
          "涂布平均浪费率",
          "分切平均报废率",
          "分切平均浪费率",
        ],
        textStyle: {
          color: "#fff", // 深灰色
          fontSize: "12px",
        },
        top: "18%",
      },
      xAxis: {
        name: "月",
        nameTextStyle: {
          color: "white",
          fontSize: "16px",
        },
        axisLabel: {
          color: "white",
          fontSize: "16px",
        },
        type: "category",
        data: ["Avg24", "Mar", "Apr", "May", "Jun"],
      },
      yAxis: {
        splitLine: {
          show: true,
          lineStyle: {
            type: "dashed",
          },
        },
        nameTextStyle: {
          color: "white",
        },
        axisLabel: {
          color: "white",
          formatter: "{value} %",
          fontSize: "16px",
        },
        type: "value",
        max: 10,
      },
      grid: {
        bottom: "15%",
        top: "30%",
      },
      series: [
        {
          name: "涂布平均报废率",
          data: [1.25, 2.47, 4.17, 1.55, 1.51],
          type: "line",
          label: {
            show: true, // 显示标签
            position: "top", // 标签的位置，可以是 'top', 'bottom', 'left', 'right' 等
            fontWeight: "lighter",
            //color: 'rgba(0, 221, 255, 1)',
            color: "white",
          },
          // markLine: {
          //   symbol: "none", // 设置为 'none' 或者空字符串来移除箭头,
          //   data: [
          //     // 目标值线
          //     {
          //       yAxis: 1.2, // 目标值
          //       name: "目标值", // 显示的名称
          //       lineStyle: {
          //         // type: 'dashed',
          //         type: [0, 10, 0],

          //         dashOffset: 3,
          //         color: "#7FFF00", // 线的颜色
          //       },
          //       label: {
          //         color: "green",

          //         fontSize: 14,
          //         fontWeight: "bold",
          //         show: true, // 是否显示标签
          //         offset: [-80, -12], // 标签偏移量
          //         formatter: "目标值:1.20% ",
          //       },
          //     },
          //   ],
          // },
        },
        {
          name: "涂布平均浪费率",
          data: [1.2, 1.2, 1.2, 1.2, 1.2],
          type: "line",
          label: {
            show: true, // 显示标签
            position: "top", // 标签的位置，可以是 'top', 'bottom', 'left', 'right' 等
            fontWeight: "lighter",
            //color: 'rgba(0, 221, 255, 1)',
            color: "white",
          },
          // markLine: {
          //   symbol: "none", // 设置为 'none' 或者空字符串来移除箭头,
          //   data: [
          //     // 目标值线
          //     {
          //       yAxis: 1.2, // 目标值
          //       name: "目标值", // 显示的名称
          //       lineStyle: {
          //         // type: 'dashed',
          //         type: [0, 10, 0],

          //         dashOffset: 3,
          //         color: "#7FFF00", // 线的颜色
          //       },
          //       label: {
          //         color: "green",

          //         fontSize: 14,
          //         fontWeight: "bold",
          //         show: true, // 是否显示标签
          //         offset: [-80, -12], // 标签偏移量
          //         // formatter: "目标值:300 ",
          //       },
          //     },
          //   ],
          // },
        },
        {
          name: "分切平均报废率",
          data: [2.55, 3.3, 2.74, 1.76, 3.1],
          type: "line",
          label: {
            show: true, // 显示标签
            position: "top", // 标签的位置，可以是 'top', 'bottom', 'left', 'right' 等
            fontWeight: "lighter",
            //color: 'rgba(0, 221, 255, 1)',
            color: "white",
          },
          // markLine: {
          //   symbol: "none", // 设置为 'none' 或者空字符串来移除箭头,
          //   data: [
          //     // 目标值线
          //     {
          //       yAxis: 2.7, // 目标值
          //       name: "目标值", // 显示的名称
          //       lineStyle: {
          //         // type: 'dashed',
          //         type: [0, 10, 0],

          //         dashOffset: 3,
          //         // color: "#7FFF00", // 线的颜色
          //       },
          //       label: {
          //         color: "green",

          //         fontSize: 14,
          //         fontWeight: "bold",
          //         show: true, // 是否显示标签
          //         offset: [-80, -12], // 标签偏移量
          //         formatter: "目标值:2.7% ",
          //       },
          //     },
          //   ],
          // },
        },
        {
          name: "分切平均浪费率",
          data: [2.7, 2.7, 2.7, 2.7, 2.7],
          type: "line",
          label: {
            show: true, // 显示标签
            position: "top", // 标签的位置，可以是 'top', 'bottom', 'left', 'right' 等
            fontWeight: "lighter",
            //color: 'rgba(0, 221, 255, 1)',
            color: "white",
          },
          // markLine: {
          //   symbol: "none", // 设置为 'none' 或者空字符串来移除箭头,
          //   data: [
          //     // 目标值线
          //     {
          //       yAxis: 2.7, // 目标值
          //       name: "目标值", // 显示的名称
          //       lineStyle: {
          //         // type: 'dashed',
          //         type: [0, 10, 0],

          //         dashOffset: 3,
          //         // color: "#7FFF00", // 线的颜色
          //       },
          //       label: {
          //         color: "green",

          //         fontSize: 14,
          //         fontWeight: "bold",
          //         show: true, // 是否显示标签
          //         offset: [-80, -12], // 标签偏移量
          //         formatter: "目标值:2.7% ",
          //       },
          //     },
          //   ],
          // },
        },
      ],
    };

    // 使用配置项渲染图表
    chartInstance.setOption(option);
  }
};

// 窗口大小变化时调整图表尺寸
const resizeChart = () => {
  chartInstance?.resize();
};

// 组件挂载后执行初始化
onMounted(() => {
  initChart();
  // 监听窗口大小变化事件以支持响应式
  window.addEventListener("resize", resizeChart);
});

// 组件卸载前清理资源，防止内存泄漏
onBeforeUnmount(() => {
  window.removeEventListener("resize", resizeChart);
  chartInstance?.dispose(); // 销毁 echarts 实例
});
</script>
